<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论</title>
    <link rel="stylesheet" type="text/css" href="/mi/css/comment/comment.css">
    <link rel="stylesheet" href="/mi/css/common/header.css">
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
</head>
<body>

<%@include file="../common/header.jsp"%>


<div class="contain-box">
    <div class="comment-index">
        <div>
            <!-- 评论顶部  大家认为 -->
            <div class="comment-top">
                <div class="title">大家认为</div>
                <div class="category">
                    <div class="cate-common chose">
                        <span>综合</span>
                        <span>（17411）</span>
                    </div>
                    <div class="cate-common">
                        <span>颜值够高</span>
                        <span>（17411）</span>
                    </div>
                    <div class="cate-common">
                        <span>传输速度够快</span>
                        <span>（17411）</span>
                    </div>
                    <div class="cate-common">
                        <span>价格实惠</span>
                        <span>（17411）</span>
                    </div>
                    <div class="cate-common">
                        <span>待机给力</span>
                        <span>（17411）</span>
                    </div>
                </div>
            </div>


            <div class="comment-mid">
                <div class="mid-left">
                    <div class="l-top">
                        <div class="t-title">热门评价</div>
                    </div>


                    <!-- 评价部分 -->
                    <c:forEach items="${commentList}" var="comment">
                        <div class="l-content">
                            <div class="comps">
                                <div class="common">
                                    <!-- 头像+评论日期 -->
                                    <div class="top">
                                        <a href="" class="port">
                                            <img src="${comment.userimg}" alt="">
                                        </a>
                                        <div class="time">
                                            <a href="">${comment.nickname}</a>
                                            <div class="times">${comment.createdatetime}</div>
                                        </div>
                                    </div>

                                    <!-- 评论内容 -->
                                    <a href="" class="des">
                                            ${comment.content}
                                    </a>

                                    <!-- 评论图片 -->
                                    <div class="images">
                                        <c:forEach items="${commentImgs}" var="commentimg">
                                            <c:if test="${commentimg.uid==comment.id}">
                                                <div class="image">
                                                    <img src="${commentimg.commentimg}" alt="" >
                                                </div>
                                            </c:if>
                                        </c:forEach>
                                    </div>

                                    <!-- 点赞 -->
                                    <div class="appreciate iconfont" onclick="good(${comment.aid}, ${comment.likenum}, this)">
                                        <b>&#xe61f;</b>
                                        <span>${comment.likenum}</span>
                                    </div>



                                    <!-- 回复的具体信息 -->
                                    <div class="commentList">
                                        <c:forEach items="${comments}" var="son" varStatus="xh">
                                            <c:if test="${son.parentid==comment.id}">
                                                <div class="comments">
                                                    <img src="${son.userimg}" alt="">
                                                    <div class="c-right">
                                                        <div class="c-t">${son.nickname}</div>
                                                            <%--                                                        <h1>${son.id}</h1>--%>
                                                        <div class="c-b">
                                                            <span>${son.content}</span>
                                                            <span class="point" onclick="good(${son.aid},${son.likenum}, this)">
                                                            <b class="dian iconfont">&#xe61f;</b><span>${son.likenum}</span>
                                                        </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </c:if>
                                        </c:forEach>
                                    </div>

                                    <!-- 回复功能 -->
                                    <div class="reply">
                                        <input type="text" placeholder="评论楼主" class="input J_reply_input" id="${comment.aid}">
                                        <div class="btn" onclick="reply(${comment.aid}, '${user.userImg}', '${user.userName}')">评论</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>

                <div class="mid-right">
                    <div class="m-t">
                        <span>17547</span>
                        人购买后满意
                    </div>
                    <div class="m-b">
                        <i style="width: 99.6%;">
                            <span>满意度： 99.6%</span>
                        </i>

                    </div>
                </div>
            </div>


        </div>

    </div>

</div>




<!-- 底部公共部分 -->
<div class="page-bottom">
    <ul class="address clear container">
        <li>
            <div>
                <a href="">
                    <i class="iconfont">&#xe607;</i>
                    <span>预约维修服务</span>
                </a>

            </div>
        </li>
        <li>
            <div>
                <a href="">
                    <i class="iconfont">&#xe603;</i>
                    <span>七天无理由退货</span>
                </a>

            </div>
        </li>
        <li>
            <div>
                <a href="">
                    <i class="iconfont">&#xe60f;</i>
                    <span>15天免费换货</span>
                </a>

            </div>
        </li>
        <li>
            <div>
                <a href="">
                    <i class="iconfont">&#xe778;</i>
                    <span>满69包邮</span>
                </a>

            </div>
        </li>
        <li>
            <div>
                <a href="">
                    <i class="iconfont">&#xe608;</i>
                    <span>520余家售后网点</span>
                </a>

            </div>
        </li>
    </ul>
    <div class="bottom-message clear container">
        <ul class="bottom-list">
            <li>
                <dl>
                    <dd>帮助中心</dd>
                    <dt><a href="">账户管理</a></dt>
                    <dt><a href="">购物指南</a></dt>
                    <dt><a href="">订单操作</a></dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dd>服务支持</dd>
                    <dt><a href="">售后政策</a></dt>
                    <dt><a href="">自动服务</a></dt>
                    <dt><a href="">相关下载</a></dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dd>线下门店</dd>
                    <dt><a href="">小米之家</a></dt>
                    <dt><a href="">服务网点</a></dt>
                    <dt><a href="">授权体验店</a></dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dd>关于小米</dd>
                    <dt><a href="">了解小米</a></dt>
                    <dt><a href="">加入小米</a></dt>
                    <dt><a href="">投资者关系</a></dt>
                    <dt><a href="">企业社会责任</a></dt>
                    <dt><a href="">廉洁举报</a></dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dd>关注我们</dd>
                    <dt><a href="">新浪微博</a></dt>
                    <dt><a href="">官方微信</a></dt>
                    <dt><a href="">联系我们</a></dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dd>特色服务</dd>
                    <dt><a href="">F码通道</a></dt>
                    <dt><a href="">礼物码</a></dt>
                    <dt><a href="">防伪查询</a></dt>
                </dl>
            </li>
        </ul>
        <div class="contact">
            <h2>400-100-5678</h2>
            <p>8:00-18:00（仅收市话费）</p>
            <a href="">
                <div class="customer">
                    <i class="iconfont">&#xe605;</i>
                    <span>人工客服</span>
                </div>
            </a>
            <div class="wbwx">
                <span>关注小米：</span>
                <a href=""><i class="iconfont">&#xe613;</i></a>
                <a href=""><i class="iconfont">&#xe604;</i></a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/mi/js/product/comment.js"></script>
</body>
</html>